<template>
  <div>
    <!--  -->
    <van-nav-bar
      class="app-1"
      title="支付订单"
      left-text=""
      left-arrow
      @click-left="index()"
    />
    <div class="my-goods-item">
      <div class="right">
        <div class="bottom1">
          <svg
            t="1628582105088"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2439"
            width="30"
            height="30"
          >
            <path
              d="M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z"
              fill="#09BB07"
              p-id="2440"
            ></path>
          </svg>
          <span class="liji"
            >需支付：<span class="price">¥{{ allPrice }}元</span></span
          >
        </div>
      </div>
    </div>
    <div class="my-goods-item">
      <div class="span-left"><span>收款方</span></div>
      <div class="span-right"><span>极美商户</span></div>
    </div>
    <van-button type="primary" size="large" class="btn" @click="zhifu()"
      >确认支付 ￥{{ allPrice }}元</van-button
    >
  </div>
</template>

<script>
import { Toast } from 'vant';
import axios from "axios";
import { Dialog } from "vant";
export default {
  data() {
    return {
      allPrice: this.$route.query.allPrice,
      userId: JSON.parse(localStorage.getItem("user")).userId,
      form: "",
      arr: this.$route.query.arr,
    };
  },
  created() {
    console.log(this.$route.query.allPrice);
  },
  methods: {
    zhifu() {
      Dialog.confirm({
        title: "极美平台商户",
        message: "支付￥" + this.$route.query.allPrice + "元",
      })
        .then(() => {
          // on confirm
          this.arr.forEach((v) => {
            if (v.goods_state) {
              console.log(v.id);
              axios({
                url: "/api/product/deletee",
                method: "GET",
                params: {
                  id: v.id,
                  userId: JSON.parse(localStorage.getItem("user")).userId,
                },
              }).then((res) => {});
            }
          });

          axios({
            url: "/api/user/pricee", //?startDate
            method: "GET",
            params: {
              allPrice: this.allPrice,
              userId: JSON.parse(localStorage.getItem("user")).userId,
            },
          }).then((res) => {
             Toast.success('付款成功');
            this.$router.push({ path: "/good" });
            this.$router.go(0);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 跳转首页
    index() {
      this.$router.go(-1);
    },
  },
};
</script>

<style  lang="less" scoped>
.span-right {
  float: left;
  margin-left: 56%;
}
.span-left {
  float: left;
  color: #949494;
}
.icon {
  float: left;
  margin-left: 90px;
  margin-top: 15px;
}

.btn {
  float: left;
  margin-top: 100px;
  width: 90%;
  border-radius: 6px;
  margin-left: 5%;
}
.li {
  width: 20%;
  height: 30px;
  border-radius: 40px;
  float: right;
  background-color: #df656f;
  margin-top: 8%;
  text-align: center;
  color: #fff;
  line-height: 30px;
  margin-right: -15%;
  font-size: 15px;
}
.sheng {
  width: 15%;
  height: 30px;
  margin-top: 15%;
  float: right;
  margin-right: 3%;
  font-size: 10px;
}
.miao-3-1 {
  width: 100%;
}
.active {
  color: red;
}

.miao-2 {
  width: 100%;
  height: 100%;
  float: left;
  background-color: #ffffff;
  text-align: center;
  //   border-bottom: 15px solid #f4f4f4;
  /* color: #333333; */
  font-size: 20px;
  line-height: 40px;
  display: flex;
}
.miao-1 {
  width: 100%;
  height: 65px;
  float: left;
  text-align: center;
  color: #333333;
  font-size: 26px;
  line-height: 70px;
}

/* c */
.delete-button {
  height: 100%;
}
.my-goods-item {
  padding: 15px;
  /* 容器设为弹性布局 */
  display: flex;
  border-bottom: 1px solid #ccc;

  .left {
    img {
      border-radius: 10px;
      background-color: #fff;
      margin-right: 8px;
      width: 100px;
      height: 100px;
    }
    .custom-control-label::before,
    .custom-control-label::after {
      top: 50px;
    }
  }
}
.aaa {
  width: 30px;
  height: 15px;
  margin-left: 15px;
  border: 1px solid #df656f;
  border-radius: 2px;
}
.span {
  float: left;
  margin-top: -10px;
  font-size: 12px;
  margin-left: 320px;
  color: #e87d6f;
  width: 100%;
}
.liji {
  width: 100px;
  height: 30px;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}
.price {
  float: left;
  margin-left: 80px;
  margin-top: -18px;
  color: #a02c26;
  width: 100%;
}
</style>